<template>
    <div>
      <el-button @click="gotoexcel">导出表格</el-button>
      <div class="content">
        <el-table :data="tableData"
                  style="width: 100%">
          <el-table-column prop="date"
                           label="日期"
                           width="150">
          </el-table-column>
          <el-table-column label="配送信息">
            <el-table-column prop="name"
                             label="姓名"
                             width="120">
            </el-table-column>
            <el-table-column label="地址">
              <el-table-column prop="province"
                               label="省份"
                               width="120">
              </el-table-column>
              <el-table-column prop="city"
                               label="市区"
                               width="120">
              </el-table-column>
              <el-table-column prop="address"
                               label="地址"
                               width="300">
              </el-table-column>
              <el-table-column prop="zip"
                               label="邮编"
                               width="120">
              </el-table-column>
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </template>
  
  <script>
  import LAY_EXCEL from 'lay-excel';
  export default {
    data () {
      return {
        tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-08',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-06',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-07',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }]
      }
    },
    methods: {
      gotourl () {
        this.$router.push({
          path: "/about",
          query: {
            id: 1
          }
        })
      },
      gotoexcel () {
        console.log('点击了导出')
        let _this = this;
        let result = JSON.parse(JSON.stringify(_this.tableData))
        result.unshift({ date: '日期', name: "姓名", province: "省份", city: "市区", address: "详细地址", zip: "邮编" })
  
        //设置样式的函数
        // LAY_EXCEL.setExportCellStyle(result, 'A1:F10', {
        //   s: {
        //     fill: { bgColor: { rgb: "ffffff" }, fgColor: { rgb: "ffffff" } },
        //     font: {
        //       color: {
        //         rgb: "000000"
        //       },
        //       sz: "14",
        //       bold: true
        //     },
        //     alignment: {
        //       horizontal: 'center',
        //       vertical: 'center'
        //     },
        //     // border: {
        //     //   top: { style: 'thin', color: { rgb: '000000' } },
        //     //   bottom: { style: 'thin', color: { rgb: '000000' } },
        //     //   left: { style: 'thin', color: { rgb: '000000' } },
        //     //   right: { style: 'thin', color: { rgb: '000000' } }
        //     // }
        //   },
        //   // 回调参数，cell:原有数据，newCell:根据批量设置规则自动生成的样式，row:所在行数据，config:传入的配置,currentRow:当前行索引,currentCol:当前列索引，fieldKey:当前字段索引
        //   function (cell, newCell, row, config, currentRow, currentCol, fieldKey) {
        //     console.log(cell, newCell, row, config, currentRow, currentCol, fieldKey)
        //     return currentRow % 2 == 0 ? newCell : cell;// 隔行隔列上色
        //   }
        // })
  
        // LAY_EXCEL.setExportCellStyle(result, 'F4:F10', {
        //   s: {
        //     fill: { bgColor: { rgb: "FFE793" }, fgColor: { rgb: "FFE793" } },
        //     font: {
        //       color: {
        //         rgb: "0076B8"
        //       },
        //       sz: "28",
        //       bold: true
        //     },
        //     alignment: {
        //       horizontal: 'center',
        //       vertical: 'center'
        //     },
        //     border: {
        //       top: { style: 'thin', color: { rgb: 'FFFF0000' } },
        //       bottom: { style: 'thin', color: { rgb: 'FFFF0000' } },
        //       left: { style: 'thin', color: { rgb: 'FFFF0000' } },
        //       right: { style: 'thin', color: { rgb: 'FFFF0000' } }
        //     }
        //   },
        //   // 回调参数，cell:原有数据，newCell:根据批量设置规则自动生成的样式，row:所在行数据，config:传入的配置,currentRow:当前行索引,currentCol:当前列索引，fieldKey:当前字段索引
        //   function (cell, newCell, row, config, currentRow, currentCol, fieldKey) {
        //     console.log(cell, newCell, row, config, currentRow, currentCol, fieldKey)
        //     return currentRow % 2 == 0 ? newCell : cell;// 隔行隔列上色
        //   }
        // })
  
  
        //var mergeConf = LAY_EXCEL.makeMergeConfig([['A1', 'A3'], ['B1', 'F1'], ['B2', 'B3'], ['C2', 'F2']]); //从开头到结束
        //var colConf = LAY_EXCEL.makeColConfig({ 'A': 300, 'B': 200, 'C': 100, 'D': 200, 'E': 600, 'F': 300 });
        //var rowConf = LAY_EXCEL.makeRowConfig({ 0: 300, 4: 1000 }, 200);  //第0行
  
        LAY_EXCEL.exportExcel(
          {
            '第一页': result,
  
          },
          '表格导出.xlsx',
          'xlsx',
          {
            extend: {
              // extend 中可以指定某个 sheet 的属性，如果不指定 sheet 则所有 sheet 套用同一套属性
              '第一页': {
                // 以下配置仅 sheet1 有效
                //'!merges': mergeConf,
                //'!cols': colConf,
                //'!rows': rowConf
              }
            }
          }
        )
      }
    }
  }
  </script>
  